<template>
	<div class="mainCanvas">
		<iframe :src="`${url}/web/cdszls/fly/html/index.html#/`" v-if="iframeShow" class="iframe"></iframe>
		<!-- 标题 -->
		<CanvasTitle v-show="!iframeShow" />
		<div class="mainCanvas-content" v-show="!iframeShow">
			<!-- 动作 -->
			<CanvasAction @hideCard="hideCard" />
			<!-- 属性 -->
			<CanvasEditor />
			<!-- 画布 -->
			<div class="mainCanvas-canvas">
				<!-- 有场景状态-->
				<div class="mainCanvas-canvas__data">
					<CanvasRender :paddingLeft="isPaddingLeft" />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import CanvasTitle from './title';
import CanvasAction from './action';
import CanvasEditor from './editor';
import CanvasRender from './render';
export default {
	name: 'MainCanvas',
	components: {
		CanvasTitle /* 画布标题 */,
		CanvasAction /* 画布动作面板 */,
		CanvasEditor /* 画布编辑器 */,
		CanvasRender /* 画布渲染 */
	},
	data() {
		return {
			menuType: 'Handle' /* 菜单栏对应标题类型 */,
			isPaddingLeft: true /* 是否左偏移 */,
			iframeShow: false,
			loading: false,
			url: ''
		};
	},
	created() {
		this.url = window.location.origin;
		this.init();
	},
	methods: {
		// 初始化
		init() {
			this.$EventBus.$on('toggleMenu', this.toggleMenu);
		},

		toggleMenu(type) {
			if (type == '面板') {
				this.iframeShow = true;
			} else {
				this.iframeShow = false;
			}
		},

		// 隐藏卡片事件
		hideCard(val) {
			this.isPaddingLeft = !val;
		}
	}
};
</script>

<style lang="scss">
.mainCanvas {
	font-size: 14px;
	height: 100%;
	width: 100%;
	background-color: $--xy-color-deepest;
	position: relative;
	.iframe {
		width: 100%;
		height: 100%;
	}

	.mainCanvas-content {
		height: calc(100% - 45px);
		display: flex;
		position: relative;
		overflow-x: hidden;
	}

	.mainCanvas-canvas {
		flex: 1;
		height: 100%;
		background-color: #111;

		&__data {
			height: 100%;
			width: 100%;
			overflow: hidden;
		}
	}
}
</style>
